<!DOCTYPE html>
<html class="full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户后台管理系统</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/index.css"/>
</head>
<body>
<div id="app">
    <!-- 侧边栏 -->
    <el-scrollbar wrap-class="scrollbar-wrapper" class="sidebar-container">
        <el-menu
                :default-active="activeIndex"
                :show-timeout="200"
                mode="vertical"
                background-color="#304156"
                text-color="#bfcbd9"
                active-text-color="#409EFF"
                unique-opened

        >
            <el-submenu v-for="(bean,key) in List" :index="key.toString()+1">

                <template slot="title">
                    <div @click="navDeal(bean.id,key)"><i
                            :class="icon[key].value"></i><span>{{bean.permission_name}}</span>
                    </div>

                </template>
                <el-menu-item v-for="(second,id) in listTwo" v-bind:index="key+'-'+id"
                              @click="jump(second.permission_url)">
                    {{second.permission_name}}
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </el-scrollbar>

    <!-- 顶边栏 -->
    <div class="main-container">
        <!-- 顶部导航 -->
        <div class="navbar">
            <!-- 靠右菜单 -->
            <div class="right-menu">
                <a href="/shopping/index.page" style="color: black">
                    <div class="international right-menu-item" style="font-size: 14px;cursor: pointer;">
                        首页
                    </div>
                </a>

                <div class="international right-menu-item" @click="message" style="font-size: 14px;cursor: pointer;">
                    消息中心
                    <el-badge v-if="count>0" :value="count" :max="99" class="badge"></el-badge>

                </div>
                <div class="international right-menu-item" style="font-size: 14px;cursor: pointer;">
                ${userName}
                </div>
                <!-- 全屏 -->
                <div class="screenfull right-menu-item">
                    <svg
                            t="1508738709248"
                            class="screenfull-svg"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2069"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            width="32"
                            height="32"
                            @click="setFullScrren"
                    >
                        <path
                                d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
                                p-id="2070"
                        />
                        <path
                                d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
                                p-id="2071"
                        />
                        <path
                                d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
                                p-id="2072"
                        />
                        <path
                                d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
                                p-id="2073"
                        />
                    </svg>
                </div>
                <el-dropdown
                        class="avatar-container right-menu-item"
                        trigger="click"
                >
                    <div class="avatar-wrapper">
                        <img
                                src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/avatar.png"
                                class="user-avatar"
                        />
                        <i class="el-icon-setting user-setting"></i>
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <span style="display:block;" @click="account">个人中心</span>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <span style="display:block;" @click="password">密码安全</span>
                        </el-dropdown-item>
                        <a href="/logout" style="text-decoration:none">
                            <el-dropdown-item>
                                <span style="display:block;">登出</span>
                            </el-dropdown-item>
                        </a>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <iframe class="app-main" :src="ifreamSrc" frameborder="0" scrolling="yes"></iframe>
        </div>

    </div>

</div>
</body>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/screenfull.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                activeIndexOne: "1",
                activeIndexTwo: "0",
                List: [],//El表达式直接遍历
                listTwo: [],
                ifreamSrc: '${url}',
                count: ${count},
                dialogVisible: false,
                tableData: [],
                currentPage: 1, //当前页
                pageSize: 100, //每页总数
                totalRecords: 0, //总条数
                icon: [
                    {
                        value: 'el-icon-menu',
                    },
                    {
                        value: 'el-icon-location-outline',
                    },
                    {
                        value: 'el-icon-star-off',
                    },
                    {
                        value: 'el-icon-edit-outline',
                    }, {
                        value: 'el-icon-setting',
                    }
                ]
            }
        },
        computed: {
            activeIndex() {
                return this.activeIndexOne + "-" + this.activeIndexTwo;
            }
        },
        mounted() {
            this.message();
            this.ajaxFunction();
        },
        methods: {
            setFullScrren() {
                if (!screenfull.enabled) {
                    this.$message({
                        message: "you browser can not work",
                        type: "warning"
                    });
                    return false;
                }
                screenfull.toggle();
            },
            message: function () {
                this.listTwo = [];
                this.jump("/message/index.page");
            },
            account: function () {
                this.listTwo = [];
                this.jump("/userCenter/account/index.page");
            },
            password: function () {
                this.listTwo = [];
                this.jump("/userCenter/psdUpdate/index.page");
            },
            listTwoFunction: function (id) {
                var leftList = [];
                $.ajax({
                    url: '/permission/permissionTreeList.json?pid=' + id,
                    type: 'get',
                    // data: {pid: id},
                    async: false,
                    dataType: 'json',
                    success: (result) => {
                        if (result.ret) {
                            leftList = result.data;
                            app.listTwo = leftList;
                            app.activeIndexTwo = "999";
                            this.$nextTick().then(() => {
                                app.activeIndexTwo = "0";
                            })
                        } else {
                            alert(result.msg);
                        }
                    }
                });
            },
            navDeal: function (id, key) {
                this.listTwoFunction(id);
                var permission_url = '';
                app.activeIndexOne = key;
                app.activeIndexTwo = "0";
                console.log(this.listTwo)
                if (this.listTwo.length > 0) {
                    permission_url = this.listTwo[0].permission_url;
                    this.jump(permission_url);
                }
            },
            jump: function (str) {
                this.ifreamSrc = '';
                setTimeout(() => {
                    this.ifreamSrc = str;
                }, 0)
            },
            ajaxFunction() {
                var resultData = [];
                var bool = false;
                $.ajax({
                    url: '/permission/permissionTreeList.json',
                    type: 'get',
                    // async: false,
                    dataType: 'json',
                    success: (result) => {
                        console.log(result);
                        if (result.ret) {
                            resultData = result.data;
                            // var index = resultData.findIndex((element) => {
                            //     return element.permission_name == "订单管理"
                            // });
                            // this.activeIndexOne = index.toString();
                            // this.listTwoFunction("39")
                            // this.activeIndexTwo="0";
                            this.List = resultData;
                        } else {
                            this.$message({
                                message: '系统异常，列表获取异常，请重试.',
                                type: 'error'
                            });
                        }
                    }
                });
                // if (bool) {
                //
                // } else {
                //
                // }

            },
        },

    })
</script>

</html>